import { useState, useEffect } from 'react';
import { Carousel, Row, Col, List, Spin, Button } from 'antd';
import { fetchHotPosts, fetchCarouselItems, fetchRecommendedTorrents } from '../api/HomeApi';
import { useNavigate } from 'react-router-dom';
import SeedDetail from './SeedDetail';  // 导入种子详情组件
import './Home.css';

function Home() {
  const [carouselItems, setCarouselItems] = useState([]);
  const [hotPosts, setHotPosts] = useState([]);
  const [hotResources, setHotResources] = useState([]);
  const [load,setLoading] = useState(true);
  const [selectedSeedId, setSelectedSeedId] = useState(null);
  const [isDetailModalVisible, setIsDetailModalVisible] = useState(false);
  const navigate = useNavigate();

  useEffect(() => {
    const loadData = async () => {
      try {
        setLoading(true);
        const [carousel, posts, recommendedResources] = await Promise.all([
          fetchCarouselItems(),
          fetchHotPosts(),
          fetchRecommendedTorrents()
        ]);

        setCarouselItems(carousel);
        setHotPosts(posts?.data?.postList || []);
        setHotResources(recommendedResources.data || []);
      } catch (error) {
        console.error('加载首页数据失败:', error);
      } finally {
        setLoading(false);
      }
    };

    loadData();
    const refreshInterval = setInterval(loadData, 5 * 60 * 1000);
    return () => clearInterval(refreshInterval);
  }, []);

  // 添加处理种子点击的函数
  const handleSeedClick = (id) => {
    setSelectedSeedId(id);
    setIsDetailModalVisible(true);
  };

  // 添加关闭详情弹窗的函数
  const handleDetailModalClose = () => {
    setIsDetailModalVisible(false);
    setSelectedSeedId(null);
  };

  return (
    <div className="home-container">
      {/* 滚动热点图片 */}
      <div className="poster-section">
        <Carousel autoplay>
          {carouselItems.map(item => (
            <div key={item.id}>
              <img src={item.image} alt={item.title} />
            </div>
          ))}
        </Carousel>
      </div>

      {/* 热点内容区域 */}
      <div className="hotspot-section">
        <h2 className="section-title">热点</h2>
        <Row gutter={24}>
          {/* 热门帖子 */}
          <Col span={12}>
            <div className="hot-posts">
              <h3>热门帖子</h3>
              <List
                itemLayout="horizontal"
                dataSource={hotPosts}
                renderItem={item => (
                  <List.Item
                    className="post-item"
                    style={{ cursor: 'pointer' }}
                    onClick={() => navigate(`/community/${item.id}`)}
                  >
                    <div className="post-info">
                      <h4 className="post-title">{item.title}</h4>
                      <div className="post-meta">
                        <span className="post-likes">{item.likeCount} 点赞</span>
                        <span className="post-views">{item.viewCount} 浏览</span>
                        <span className="post-user">作者: {item.userName}</span>
                        <span className="post-time">{new Date(item.createdTime).toLocaleString()}</span>
                      </div>
                    </div>
                  </List.Item>
                )}
              />
            </div>
          </Col>
          
          {/* 热门资源 */}
          <Col span={12}>
            <div className="hot-resources">
              <h3>热门资源</h3>
              <List
                itemLayout="horizontal"
                dataSource={hotResources}
                renderItem={item => (
                  <List.Item 
                    className="resource-item"
                    onClick={() => handleSeedClick(item.id)}
                    style={{ cursor: 'pointer' }}
                  >
                    <div className="resource-info">
                      <div className="resource-meta">
                        <span className="resource-type">{item.title}</span>
                        <span className="resource-type">作者：{item.uploadUsername}</span>
                        <span className="resource-size">点赞数：{item.likeCount}</span>
                        <span className="resource-downloads">{item.downloads} 下载</span>
                      </div>
                    </div>
                  </List.Item>
                )}
              />
            </div>
          </Col>
        </Row>
      </div>

      {/* 添加种子详情弹窗 */}
      {selectedSeedId && (
        <SeedDetail
          id={selectedSeedId}
          visible={isDetailModalVisible}
          onClose={handleDetailModalClose}
        />
      )}
    </div>
  );
}

export default Home;